<template>
	<view class="me">
		<view class="noLogin" v-if="!isLogin">
			<image src="../../static/images/icons/weidenglu.jpg" mode="widthFix"></image>
			<view class="tips">
				您还未登录，请先登录。
			</view>
			<button type="success" @click="login">登录</button>
		</view>

		<view v-else>
			<!-- 头部会员卡 -->
			<view class="headerLogo" :style="{backgroundImage: `url(${baseURL}/common/static/vipcard.png)`}">
				<view class="left">
					<view class="grade">会员</view>
					<view class="memberID">
						<view class="title">NO</view>
						<view class="num">001</view>
					</view>
				</view>
				<view class="right">
					<!-- <view class="name">皇家排长</view> -->
					<view class="menber">- MEMBER -</view>
					<view class="grade">会员</view>
				</view>
			</view>

			<!-- 账户 -->
			<!-- 		<view class="account">
			<navigator class="accountItem" url="./recharge">
				<view class="num">{{userInfo.money.toFixed(2)}}</view>
				<view class="text">余额</view>
			</navigator>
			 			<view class="accountItem">
				<view class="num">0</view>
				<view class="text">积分</view>
			</view> 
			<view class="accountItem">
				<view class="num">0</view>
				<view class="text">劵</view>
			</view>
		</view> -->

			<!-- 设置 -->
			<view class="setting">
				<navigator url="./recharge"><text>余额</text>
					<view>
						<text>{{userInfo.money.toFixed(2)}}</text>
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</navigator>
				<!-- <navigator><text>绑定手机号</text><u-icon name="arrow-right" size="22"></u-icon></navigator> -->
				<navigator url="./info"><text>我的信息</text>
					<u-icon name="arrow-right" size="22"></u-icon>
				</navigator>
				<navigator url="./password"><text>修改密码</text>
					<u-icon name="arrow-right" size="22"></u-icon>
				</navigator>
			</view>

			<!-- 底部 -->
			<view class="footer">
				<view>
					<u-icon name="weixin-circle-fill" size="30"></u-icon>
				</view>
				<view>empty提供技术支持</view>
				<view>
					<u-icon name="phone" size="30"></u-icon><text>132-2591-0068</text>
				</view>
			</view>
		</view>
		<Tabbar />
	</view>
</template>

<script>
	import Tabbar from '../../components/Tabbar.vue'
	import {
		baseURL
	} from '../../api/request.js'

	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				baseURL,
				userInfo: {
					money: 0
				},
				isLogin: false,
			}
		},
		methods: {
			login() {
				getApp().getUserProfile().then(() => this.getUser())
			},
			async getUser() {
				if (uni.getStorageSync('token')) {
					this.userInfo = await getApp().getUserInfo()
					this.isLogin = true
				}
			}
		},
		async onShow() {
			this.getUser()
		},
	}
</script>

<style scoped lang="scss">
	.me {
		padding: 0 30upx;

		.login {}

		.headerLogo {
			width: 100%;
			height: 422upx;
			background-repeat: no-repeat;
			background-size: 100% auto;
			position: relative;

			view {
				color: #fff;
				font-size: 14px;
			}

			.memberID {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 10upx;

				.title {
					text-decoration: overline;
				}

				.num {
					font-size: 22px;
					margin-left: 10upx;
				}
			}

			.left {
				position: absolute;
				bottom: 30upx;
				left: 20upx;
			}

			.right {
				position: absolute;
				right: 20upx;
				top: 30upx;

				view {
					text-align: center;
				}

				.name {
					font-size: 24px;
				}

				.grade {
					border: 1px solid #fff;
				}
			}
		}

		.account {
			margin-top: 40upx;
			margin-bottom: 40upx;
			display: flex;

			.accountItem {
				flex: 1;
				text-align: center;

				.num {
					font-size: 22px;
					font-weight: bold;
					margin-bottom: 5upx;
				}

				.text {
					font-size: 12px;
				}
			}

			.accountItem:nth-child(1) {
				border-right: 1px solid #c8c8c8;
			}
		}

		.setting {
			margin-top: 20upx;

			navigator {
				display: block;
				line-height: 80upx;
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				padding: 0 10upx;
				border-bottom: 1px solid #c8c8c8;

				uni-view {
					width: 30upx;
				}
			}

			text {
				margin-right: 4upx;
			}
		}

		.footer {
			margin-top: 30upx;

			view {
				text-align: center;
				font-size: 12px;
				margin: 5upx;
			}
		}
	}
</style>
